<template>
  <Suspense>
  <el-popover popper-class="tw-selectclass" placement="right-start" :width="320" trigger="click" v-if="type==='columns'">
    <template #reference>
      <div class="avatar">
        <img :src="fileBaseUrl+userInfo.imagePath" alt="avatar" v-if="userInfo.imagePath" />
        <img src="@/assets/images/avatar.png" alt="avatar" v-else />
      </div>
    </template>
    <div class="tw-selectclass-box">
      <div class="tw-selectclass-header">
        <SvgIcon name="class-bg" class="tw-selectclass-header" />
      </div>
      <div class="tw-selectclass-userInfo">
        <div class="tw-userInfo-headImage">
          <div class="avatar xlarge">
            <img :src="fileBaseUrl+userInfo.imagePath" alt="avatar" v-if="userInfo.imagePath" />
            <img src="@/assets/images/avatar.png" alt="avatar" v-else />
          </div>
        </div>
        <p>{{ userInfo.nickName }}</p>
        <p class="xlabel">{{ userInfo.dept?.deptName }}</p>
      </div>

      <div class="tw-selectclass-tools">
        <div
          class="tw-tools-item"
          @click="logout"
          v-if="appType !== 'pad'"
        >
          <SvgIcon name="exit-login" class="x24" />
          <p>退出账号</p>
        </div>
      </div>
      <ul class="tw-selectclass-list" v-if="userInfo?.classList?.length">
        <li
          v-for="(teach, index) in userInfo?.classList"
          :key="index"
          class="tw-selectclass-listItem"
          :class="{ xselect: classId === teach.classId }"
          @click="changeClass(teach)"
        >
          <a>{{ teach.label }}</a>
          <SvgIcon name="selected-class" v-if="classId === teach.classId" style="width:20px;height:16px;" />
        </li>
      </ul>
    </div>
  </el-popover>
  <el-dropdown trigger="click" v-else>
    <div class="avatar">
      <img :src="fileBaseUrl+userInfo.imagePath" alt="avatar" v-if="userInfo.imagePath" />
      <img src="@/assets/images/avatar.png" alt="avatar" v-else />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="openDialog('infoRef')">
          <el-icon><User /></el-icon>个人信息
        </el-dropdown-item>
        <el-dropdown-item @click="openDialog('passwordRef')">
          <el-icon><Edit /></el-icon>修改密码
        </el-dropdown-item>
        <el-dropdown-item divided @click="logout">
          <el-icon><SwitchButton /></el-icon>退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</Suspense>
  <!-- infoDialog -->
  <InfoDialog ref="infoRef"></InfoDialog>
  <!-- passwordDialog -->
  <PasswordDialog ref="passwordRef"></PasswordDialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { useStore } from 'vuex'
// import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import 'element-plus/theme-chalk/src/message-box.scss'
import InfoDialog from "./InfoDialog.vue";
import PasswordDialog from "./PasswordDialog.vue";
import SvgIcon from '@common/SvgIcon/index.vue'

const props = defineProps({
  type: {
    type: String,
    default: undefined
  }
});

// const router = useRouter();

const store = useStore()
const userInfo = computed(() => $app?.user || {})
const classId = ref('')
classId.value = store.state.ecouser?.user?.classId || $app?.user.classId || ''
const appType = computed(() => window.$app?.appType)
const fileBaseUrl = computed(() => window.$app?.fileBaseUrl)

// 退出登录
const logout = () => {
  ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    window.$app.delAuth(true)
  })
}

// 打开修改密码和个人信息弹窗
const infoRef = ref(null)
const passwordRef = ref(null)
const openDialog = (ref) => {
  if (ref == "infoRef") infoRef.value?.openDialog()
  if (ref == "passwordRef") passwordRef.value?.openDialog()
}

const changeClass = (teach) => {
  // 选中和当前班级不同时才关闭标签
  if (classId.value !== teach.classId) {
    classId.value = teach.classId
    window.$app.setAuth({
      classId: teach?.classId,
      className: teach?.className,
      gradeId: teach?.gradeId,
      gradeName: teach?.gradeName,
      section: teach?.section,
      sectionName: teach?.sectionName
    }, true)
  }
}
</script>

<style scoped lang="scss">
.avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
.avatar.xlarge {
  width: 72px;
  height: 72px;
}

.tw-selectclass-box {
  position: relative;
  padding-bottom: 10px;
}

.tw-selectclass-header {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
}

.tw-selectclass-userInfo {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: $font-size-large;
  font-weight: bold;
  color: $text-color;

  .xlabel {
    font-size: $font-size-default;
    color: $text-color-remark;
  }
}

.tw-selectclass-userInfo > .tw-userInfo-headImage {
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-top: 24px;
  margin-bottom: $spacing-step;
  background: white;
  border-radius: 50%;
  display: flex;
}

.tw-selectclass-tools {
  justify-content: space-around;
  margin-top: 16px;
  display: flex;
}

.tw-selectclass-tools > .tw-tools-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  color: $text-color;
  display: flex;
  cursor: pointer;
}

.tw-selectclass-tools > .tw-tools-item > p {
  margin-top: 10px;
}

.tw-selectclass-tools > .tw-tools-item:hover {
  background: #e5f2ff;
  border-radius: 8px;
}

.tw-selectclass-box > .tw-selectclass-list {
  max-height: 300px;
  margin: 0 24px 24px 24px;
  overflow: hidden;
  overflow-y: auto;
  display: block;
}

.tw-selectclass-list > .tw-selectclass-listItem {
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 16px;
  margin-top: 16px;
  font-size: $font-size-default;
  cursor: pointer;
  background: #fff;
  border: 1px solid $border-color-main;
  border-radius: 8px;
  display: flex;
}

.tw-selectclass-listItem.xselect {
  color: $primary-color;
  background: #e5f2ff;
  border: 1px solid #e5f2ff;
  border: 1px solid  $primary-color;
  border-radius: 8px;
  opacity: 1;
}

.tw-selectclass-selectIcon {
  width: 20px;
  height: 16px;
}

</style>
